<template>
  <div>
    <!-- 输入框 -->
    <el-input
        style="width:50%;margin-bottom: 10px"
        placeholder="请根据订单编号输入搜索内容"
        v-model="pagination.queryString"
        @change="search"
        clearable>
    </el-input>
    <el-button @click="OrderList()" class="dalfBut">查询</el-button>
    <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
    <el-button type="primary" class="butT" @click="Shipment()">发货出库</el-button>
    <el-button type="primary" class="butT" @click="Driver()">出站派送</el-button>

    <!-- 数据单向绑定  :data表格数据 -->
    <el-table :data="dataList" border>
      <!-- prop属性  与此处数据的属性一致 -->
      <el-table-column prop="id"   label="订单编号" width="80" ></el-table-column>
      <el-table-column prop="userId"   label="用户编号" width="80" ></el-table-column>
      <el-table-column prop="userName"   label="用户姓名" width="80" ></el-table-column>
      <el-table-column prop="userPhone" label="用户电话" width="200" ></el-table-column>
      <el-table-column prop="userAddress"    label="用户住址" width="150" ></el-table-column>
      <el-table-column prop="driverId" label="员工编号" width="80" ></el-table-column>
      <el-table-column prop="driverPhone" label="员工电话" width="200" ></el-table-column>
      <el-table-column prop="driverName" label="员工姓名" width="200" ></el-table-column>
      <el-table-column prop="goodName" label="货物名称" width="80" ></el-table-column>
      <el-table-column prop="type" label="货物类型" width="80" >
        <template slot-scope="scope">
          {{ scope.row.type==0?'食品':scope.row.type==1?'电子产品':scope.row.type==2?'服装':scope.row.type==3?'日用品':'家具' }}
        </template>
      </el-table-column>
      <el-table-column prop="weight" label="重量" width="80" ></el-table-column>
      <el-table-column prop="price" label="价格" width="80" ></el-table-column>
      <el-table-column prop="state" label="状态" width="120">
        <template slot-scope="scope">
          {{ scope.row.state==0?'未发货':scope.row.state==1?'发货未入站':scope.row.state==2?'入站':scope.row.state==3?'出站派送中':scope.row.state==4?'用户未接收':"用户已接收"}}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="primary" size="small" icon="el-icon-edit"   circle @click="handleUpdate(scope.row)" >编辑</el-button>
          <el-button type="danger"  size="small" icon="el-icon-delete" circle @click="handleDelete(scope.row)" >删除</el-button>
        </template>
      </el-table-column>
    </el-table>


    <!-- 分页  :属性="" 单向数据绑定 -->
    <el-pagination
        class="pagiantion"
        @current-change="OrderList"
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="pagination.total">
    </el-pagination>

    <!-- 新增标签弹层 -->
    <div class="add-form">
      <el-dialog title="新增快递订单" :visible.sync="dialogFormVisible">
        <el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="用户编号" prop="userId">
<!--                <el-input v-model="formData.userId"/>-->
                <el-select @change="userChange" v-model="formData.userId" placeholder="请输入用户编号" clearable :style="{width: '100%'}">
                  <el-option v-for="(item, index) in userList" :key="index" :label="item.userId"
                             :value="item.id" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>

            </el-col>
            <el-col :span="12">
              <el-form-item label="用户姓名" prop="userName">
                <el-input v-model="formData.userName" :disabled="true">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="用户电话" prop="userPhone">
                <el-input v-model="formData.userPhone" :disabled="true">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用户住址" prop="userAddress">
                <el-input v-model="formData.userAddress" :disabled="true" >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="员工编号" prop="driverId">
                <el-input v-model="formData.driverId" readonly="readonly">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="员工电话" prop="driverPhone">
                <el-input v-model="formData.driverPhone" readonly="readonly">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="员工姓名" prop="driverName">
                <el-input v-model="formData.driverName" readonly="readonly">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="货物名称" prop="goodName">
                <el-input v-model="formData.goodName">
                </el-input>
              </el-form-item>
            </el-col>

          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="货物类型" prop="type">
                <el-input v-model="formData.type">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="重量" prop="weight">
                <el-input v-model="formData.weight">
                </el-input>
              </el-form-item>
            </el-col>

          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="价格" prop="price">
                <el-input v-model="formData.price" readonly="readonly">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态" prop="state">
                <el-input v-model="formData.state">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>


        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addPrice()">计价</el-button>
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="handleAdd()">确定</el-button>
        </div>
      </el-dialog>
    </div>

    <!-- 编辑订单 -->
    <div class="add-form">
      <el-dialog title="编辑订单" :visible.sync="dialogFormVisibleEdit">
        <el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="用户编号" prop="userId">
                <el-input v-model="formData.userId"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用户姓名" prop="userName">
                <el-input v-model="formData.userName">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="用户电话" prop="userPhone">
                <el-input v-model="formData.userPhone">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用户住址" prop="userAddress">
                <el-input v-model="formData.userAddress">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="员工编号" prop="driverId">
                <el-input v-model="formData.driverId " readonly="readonly">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="员工电话" prop="driverPhone">
                <el-input v-model="formData.driverPhone" readonly="readonly">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="员工姓名" prop="driverName">
                <el-input v-model="formData.driverName" readonly="readonly">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="货物名称" prop="goodName">
                <el-input v-model="formData.goodName">
                </el-input>
              </el-form-item>
            </el-col>

          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="货物类型" prop="type">
                <el-input v-model="formData.type">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="重量" prop="weight">
                <el-input v-model="formData.weight">
                </el-input>
              </el-form-item>
            </el-col>

          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="价格" prop="price">
                <el-input v-model="formData.price">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态" prop="state">
                <el-input v-model="formData.state">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleEdit = false">取消</el-button>
          <el-button type="primary" @click="handleEdit()">确定</el-button>
        </div>
      </el-dialog>

    </div>



  </div>
</template>

<script>
export default {
  name: "OrderView",
  data() {
    return {
      pagination: {       //分页相关模型数据
        currentPage: 1, //当前页码
        pageSize: 4,    //每页显示的记录数
        total: 100,        //总记录数
        queryString:""//查询条件
      },
      dataList: [],
      formData: {},
      userList:[],
      driverList:[],
      dialogFormVisible: false,//增加表单不可见
      dialogFormVisibleEdit: false,
      rules: {//校验规则
        userId: [{ required: true, message: '用户编号为必填项', trigger: 'blur' }],
        userName: [{ required: true, message: '用户姓名为必填项', trigger: 'blur' }],
        userPhone: [{ required: true, message: '用户电话为必填项', trigger: 'blur' }],
        userAddress: [{ required: true, message: '用户住址为必填项', trigger: 'blur' }],
        /*driverId: [{ required: true, message: '员工编号为必填项', trigger: 'blur' }],
        driverPhone: [{ required: true, message: '员工电话为必填项', trigger: 'blur' }],
        driverName: [{ required: true, message: '员工姓名为必填项', trigger: 'blur' }],*/
        goodName: [{ required: true, message: '货物名称为必填项', trigger: 'blur' }],
        type: [{ required: true, message: '货物类型为必填项', trigger: 'blur' }],
        weight: [{ required: true, message: '订单重量为必填项', trigger: 'blur' }],
        /*price: [{ required: true, message: '价格为必填项', trigger: 'blur' }],*/
        state: [{ required: true, message: '订单状态为必填项', trigger: 'blur' }]

      }
    }
  },
  created() {
    this.OrderList()
  },
  methods: {
    //若没有传递当前页码 ， 默认展示第一页
    OrderList(page = 1) {
      this.pagination.currentPage = page
      let param= {
        currentPage: this.pagination.currentPage,
        pageSize: this.pagination.pageSize,
        queryString: this.pagination.queryString
      }
      axios.get('http://localhost:8099/orders/findPage', {params: param})
          .then(response => {  //response.data.data 等价于 Map 有PageInfo&query
            console.log(response.data.records)
            this.pagination.total = response.data.total
            this.dataList = response.data.records
          })
          .catch(error => {
            console.log(error)
          })
    },
    resetForm(){
      this.formData={}
    },
    getUserId(){
      axios.get('http://localhost:8099/orders/finduser')
          .then(resp=>{
            console.log(resp.data)
            let data = resp.data;
            let code = data.code;
            if (code == 200){
              this.userList = data.data;
              console.log(this.userList)
            }else{
              this.userList = [];
            }
          })
    },
    userChange(){
      for (let i = 0; i < this.userList.length; i++) {
        if (this.formData.userId == this.userList[i].id){
          if (this.userList[i].id == 1){
            this.formData.userName='灰灰';
            this.formData.userPhone='13344445555';
            this.formData.userAddress='无锡新吴站';
          }else if (this.userList[i].id == 3){
            this.formData.userName='龟龟';
            this.formData.userPhone='13355556666';
            this.formData.userAddress='南京秦淮站';
          }else if (this.userList[i].id == 4){
            this.formData.userName='吉吉';
            this.formData.userPhone='13366667777';
            this.formData.userAddress='常州钟楼站';
          }else if (this.userList[i].id == 5){
            this.formData.userName='刚刚';
            this.formData.userPhone='13377778888';
            this.formData.userAddress='苏州吴中站';
          }else if (this.userList[i].id == 6){
            this.formData.userName='Admin';
            this.formData.userPhone='13388889999';
            this.formData.userAddress='镇江丹徒区';
          }else if (this.userList[i].id == 7){
            this.formData.userName='斯诺克';
            this.formData.userPhone='13311112222';
            this.formData.userAddress='常州郑陆站';
          }
          break;
        }
      }

    },
    handleCreate(){
      this.resetForm()
      this.getUserId()
      this.dialogFormVisible=true
    },
    addPrice(){
      axios.post(`http://localhost:8099/orders/addPrice`,this.formData).then(res=>{
        console.log(res.data)
        this.formData=res.data.data;
      })
    },
    handleAdd(){
      this.$refs["dataAddForm"].validate((valid)=>{
        if (valid){
          this.dialogFormVisible=false
          axios.post('http://localhost:8099/orders/add',this.formData).then(response=>{
            if (response.data.code ==200){
              this.$message.success(response.data.message);
            }else {
              this.$message.error(response.data.code);
            }
            this.OrderList()
          })
        }else {
          this.$message.error("表单验证失败");
          return false;
        }
      })
    },
    //弹出编辑窗口
    search(){
      this.OrderList()
    },
    handleUpdate(row){
      axios.get(`http://localhost:8099/orders/${row.id}`).then(response=> {
        if (response.data.code==200){
          this.dialogFormVisibleEdit=true
          this.formData=response.data.data
        }else {
          this.$message.error(response.data.code)
        }
      })
    },
    //编辑完成
    handleEdit(){
      //校验表单
      this.$refs["dataEditForm"].validate((valid)=>{
        if (valid){
          this.dialogFormVisibleEdit=false
          axios.post('http://localhost:8099/orders/update',this.formData).then(response=>{
            if (response.data.code==200){
              this.$message.success(response.data.message)
            }else {
              this.$message.error(response.data.code)
            }
          })
        }else {
          this.$message.error('表单校验失败')
          return false
        }
      })
      location.reload()
    },
    handleDelete(row){
      this.$confirm('是否删除此订单？','提示',{type:'warning'}).then(()=>{
        axios.delete(`http://localhost:8099/orders/delete/${row.id}`).then(response=>{
          if (response.data.code==200){
            this.$message.success(response.data.message);
            this.OrderList()
          }else {
            this.$message.error(response.data.code);
          }
        })
      })
    },
    Shipment(){
      axios.post('http://localhost:8099/orders/shipment', this.dataList)
          .then(response => {  //response.data.data 等价于 Map 有PageInfo&query
            console.log(response)
            this.pagination.total = response.data.total
            this.dataList = response.data.records
            if (response.data.code==200){
              this.$message.success(response.data.message)
              this.OrderList()
            }else {
              this.$confirm('请勿重复操作？','提示',{type:'warning'})
              this.OrderList()
            }
          })
          .catch(error => {
            console.log(error)
          })
    },
    Driver(){
      axios.get('http://localhost:8099/orders/driver')
          .then(res=>{
            console.log(res.data.records)
            this.driverList=res.data.records
            this.Sent(this.dataList,this.driverList)

          })

    },
    Sent(dataList,driverList){
      let param= {
        dataList,
        driverList
      }
      console.log(param)
      axios.post('http://localhost:8099/orders/sent', param)
          .then(response => {
            console.log(response)
            this.pagination.total = response.data.total
            this.dataList = response.data.records
            if (response.data.code==200){
              this.$message.success(response.data.message)
              this.OrderList()
            }else {
              this.$confirm('请勿重复操作？','提示',{type:'warning'})
              this.OrderList()
            }
          })
          .catch(error => {
            console.log(error)
          })
    }

  }
}
</script>

<style scoped>

</style>